<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link
      rel="stylesheet"
      data-name="vs/editor/editor.main"
      href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css"
    />
  </head>
  <body>
    <h2>Monaco Editor HTML test page</h2>
    <div
      id="container"
      style="width:800px;height:600px;border:1px solid grey"
    ></div>

    <script>
      // Loading basic-languages to get the html language definition
      var paths = {
        "vs/basic-languages": "../node_modules/monaco-languages/release/dev",
        "vs/language/html": "../release/dev",
        vs: "../node_modules/monaco-editor-core/dev/vs"
      };
      if (document.location.protocol === "http:") {
        // Add support for running local http server
        let testIndex = document.location.pathname.indexOf("/test/");
        if (testIndex !== -1) {
          let prefix = document.location.pathname.substr(0, testIndex);
          paths["vs/language/html"] = prefix + "/release/dev";
        }
      }
      var require = {
        paths: paths
      };
    </script>
    <script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script>
    <script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script>
    <script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script>

    <script>
      require([
        "vs/basic-languages/monaco.contribution",
        "vs/language/html/monaco.contribution"
      ], function() {
        monaco.languages.html.htmlDefaults.addExtraLib(
          [
            "declare class Tests {",
            "    /**",
            "     * Returns the next Tests",
            "     */",
            "    static next():string",
            "}"
          ].join("\n"),
          "ts:tests.ts"
        );
        var editor = monaco.editor.create(
          document.getElementById("container"),
          {
            value: [
              "<!DOCTYPE HTML>",
              "<!--",
              "	Comments are overrated",
              "-->",
              "<html>",
              "<head>",
              "	<title>HTML Sample</title>",
              '	<meta http-equiv="X-UA-Compatible" content="IE=edge">',
              '	<style type="text/css">',
              "		h1 {",
              "			color: #CCA3A3;",
              "		}",
              "	</style>",
              '	<script type="text/javascript">',
              '		window.alert("I am a sample...");',
              "		var x = 3;",
              "k.mail.smtpSend()",
              "	</" + "script>",
              "</head>",
              "<body>",
              "	<h1>Heading No.1</h1>",
              '	<input disabled type="button" value="Click me" />',
              "</body>",
              "</html>"
            ].join("\n"),
            language: "html"
          }
        );
      });
    </script>
  </body>
</html>
